<template>
  <div class="container">
    <div class="partial-title">
      <el-select v-model="select" placeholder="请选择">
        <el-option label="身份证号" value="idCard"></el-option>
        <el-option label="用户ID" value="userId"></el-option>
        <el-option label="图书ID" value="bookId"></el-option>
      </el-select>
      <el-input
        placeholder="请输入内容"
        v-model="searchField"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getList()"
        ></el-button>
      </el-input>
      <div class="custom-btn" @click="handleAdd()">出借</div>
    </div>
    <el-table :data="tableData" border style="width: 100%; margin-top: 1.75vw">
      <el-table-column fixed prop="id" label="ID"> </el-table-column>
      <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
      <el-table-column prop="name" label="书名"> </el-table-column>
      <el-table-column prop="lendedDate" label="出借时间">
        <template slot-scope="scope">
          {{
            scope.row.lendedDate
              .replace("T", " ")
              .replace("Z", " ")
              .substring(0, 10)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="returnDate" label="应归时间">
        <template slot-scope="scope">
          {{
            scope.row.returnDate
              .replace("T", " ")
              .replace("Z", " ")
              .substring(0, 10)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="actualReturnDate" label="是否归还">
        <template slot-scope="scope">
          {{ scope.row.actualReturnDate ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleReturn(scope.row)"
            type="primary"
            size="small"
            :disabled="scope.row.actualReturnDate ? true : false"
            >归还</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDown(scope.row)"
            :disabled="scope.row.lended == 1 || scope.row.onSale == 0"
            >下架</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="pageSize"
      :current-page.sync="pageNo"
      :total="total"
      layout="prev, pager, next"
      style="right: 1.5vw; position: absolute"
    >
    </el-pagination>
    <el-dialog title="出借" :visible.sync="addformShow">
      <el-form
        :model="addform"
        :rules="rules"
        ref="addform"
        label-position="left"
      >
        <el-form-item
          label="用户ID"
          :label-width="defaultLabelWidth"
          prop="userId"
          maxlength="20"
        >
          <el-input
            v-model="addform.userId"
            autocomplete="off"
            style="width: 15vw"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="书籍ID"
          :label-width="defaultLabelWidth"
          prop="bookId"
          maxlength="20"
        >
          <el-input
            v-model="addform.bookId"
            autocomplete="off"
            style="width: 15vw"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="借出天数"
          :label-width="defaultLabelWidth"
          prop="day"
          maxlength="20"
        >
          <el-radio-group v-model="addform.day">
            <el-radio label="3"></el-radio>
            <el-radio label="5"></el-radio>
            <el-radio label="7"></el-radio>
            <el-radio label="15"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle('addform')">取 消</el-button>
        <el-button type="primary" @click="confirmAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="归还" :visible.sync="returnformShow">
      <el-radio-group v-model="returnform.broken" @change="brokenChange()">
        <el-radio :label="0">未损坏</el-radio>
        <el-radio :label="1">损坏</el-radio>
      </el-radio-group>
      <el-descriptions
        :column="2"
        border
        class="description"
        style="margin-top: 1.5vw"
      >
        <el-descriptions-item label="ID">{{
          returnform.id
        }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{
          returnform.nickName
        }}</el-descriptions-item>
        <el-descriptions-item label="书名">{{
          returnform.name
        }}</el-descriptions-item>
        <el-descriptions-item label="借出时间">{{
          returnform.lendedDate
            .replace("T", " ")
            .replace("Z", " ")
            .substring(0, 19)
        }}</el-descriptions-item>
        <el-descriptions-item label="应还时间">{{
          returnform.returnDate
            .replace("T", " ")
            .replace("Z", " ")
            .substring(0, 19)
        }}</el-descriptions-item>

        <el-descriptions-item label="应付金额">{{
          returnform.pay
        }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle('')">取 消</el-button>
        <el-button type="primary" @click="confirmReturn()"
          >确 定 归 还</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<style>
</style>

<script>
export default {
  data() {
    let baseImgurl = window.location.origin;
    return {
      baseImgurl,
      total: 0,
      pageNo: 1,
      pageSize: 9,
      addformShow: false,
      returnformShow: false,
      select: "idCard",
      searchField: "",
      defaultLabelWidth: "6vw",
      tableData: [],
      types: [],
      addform: {
        userId: "",
        bookId: "",
        day: "3",
      },
      returnform: {
        id: "",
        userId: "",
        bookId: "",
        broken: 0,
        lendedDate: "",
        returnDate: "",
        pay: 0,
      },
      rules: {
        userId: [
          {
            required: true,
            message: "出版号不能为空！",
            trigger: "blur",
          },
        ],
        bookId: [
          {
            required: true,
            message: "书名不能为空！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getList() {
      let that = this;
      let query = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      query.role = this.role;
      query[this.select] = this.searchField;
      let queryStr = this.$query.stringify(query);
      this.$axios.get(`/api/v1/lend_infos?${queryStr}`).then((data) => {
        that.total = data.totalCount;
        that.pageNo = data.pageNo;
        that.tableData = data.infos;
      });
    },
    handleAdd() {
      this.addformShow = true;
    },
    handleReturn(row) {
      this.returnform = row;
      this.calculate();
                this.returnformShow = true;
    },
    handleDown(row) {
      let that = this;
      this.$axios
        .put("/api/v1/book/on_sale?id=" + row.bookId)
        .then((data) => {
          if (data.result) {
            that.$message.success({
              message: "成功下架",
              center: true,
              offset: screen.availHeight * 0.32,
              duration: 1200,
            });
            that.getList();
          }
        })
        .catch((err) => {
          that.$message.error({
            message: err.data.message,
            center: true,
            offset: screen.availHeight * 0.32,
            duration: 1200,
          });
        });
    },
    cancle(formName) {
      if (formName) {
        this.$refs[formName].resetFields();
      }
      this.addformShow = false;
      this.returnformShow = false;
    },
    confirmAdd() {
      let that = this;
      this.$refs["addform"].validate((valid) => {
        if (valid) {
          this.addform.role = this.role;
          this.$axios
            .post("/api/v1/lend_info", this.addform)
            .then((data) => {
              if (data.result) {
                that.$message.success({
                  message: "操作成功",
                  center: true,
                  offset: screen.availHeight * 0.32,
                  duration: 1200,
                });
                this.$refs["addform"].resetFields();
                that.getList();
                this.addformShow = false;
              }
            })
            .catch((err) => {
              that.$message.error({
                message: err.data.message,
                center: true,
                offset: screen.availHeight * 0.32,
                duration: 1200,
              });
            });
        }
      });
    },
    brokenChange() {
      this.calculate();
    },
    calculate() {
      let that = this;
      let id = this.returnform.id;
      let broken = this.returnform.broken;
      this.$axios
        .get(`/api/v1/lend_info/calculate?id=${id}&broken=${broken ? 1 : 0}`)
        .then((data) => {
          that.$set(that.returnform, 'pay', data.pay)

        });
    },
    confirmReturn() {
      let that = this;
      this.$axios
        .post("/api/v1/lend_info/return", this.returnform)
        .then((data) => {
          if (data.result) {
            that.$message.success({
              message: "操作成功！",
              center: true,
              offset: screen.availHeight * 0.32,
              duration: 1200,
            });
            this.getList();
            this.returnformShow = false;
          }
        })
        .catch((err) => {
          that.$message.error({
            message: err.data.message,
            center: true,
            offset: screen.availHeight * 0.32,
            duration: 1200,
          });
        });
    },
  },
  beforeMount() {
    this.$axios.post("/api/v1/user/verified");
    this.getList();
  },
};
</script>
